<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        v-都是指令  （directive）
        v-text v-html v-once
        v-bind :
        v-on  @
        v-model
        v-for
        v-cloak
        v-if 
        v-else-if
        v-else
        v-show

        {{}}
        
        初始化数据

        ref

        计算属性
        
     -->
     <div class="box">
         <!-- 计算器  首先两个数据  进行加减乘除 -->
         <input type="text" v-model="num1"><br>
         <input type="text" v-model="num2"><br>
         <!-- <button v-on:click="add">+</button> -->
         <button @click="add($event,1,2)">+</button>
         <span>{{sum}}</span>
     </div>
     <script src="../js/vue.js"></script>
     <script>
         let vm = new Vue({
             el:".box",
             data:{
                num1:0,
                num2:0,
                sum:0
             },
             methods: {
                 add(e,a,b){
                    //  this指的是当前的vue实例对象
                    console.log(this);
                    // 注意数据类型
                    this.sum = this.num1 * 1 + this.num2 * 1;
                    // 若果传参,event必须通过$event传进来，否则接收不到，如果不传，那e可以直接接收到
                    console.log(e);
                    console.log(a,b);
                 }
             },
             computed:{

             }
         })
         console.log(vm);
     </script>
</body>
</html>